import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const usePanelStore = defineStore('panel', () => {
  // 面板状态
  const leftPanelCollapsed = ref(false)
  const rightPanelCollapsed = ref(false)
  
  // 面板尺寸
  const leftPanelWidth = ref(320) // 20rem = 320px
  const rightPanelWidth = ref(320)
  const collapsedWidth = ref(48) // 3rem = 48px
  
  // Actions
  const toggleLeftPanel = () => {
    leftPanelCollapsed.value = !leftPanelCollapsed.value
    console.log('左侧面板收缩状态:', leftPanelCollapsed.value)
  }
  
  const toggleRightPanel = () => {
    rightPanelCollapsed.value = !rightPanelCollapsed.value
    console.log('右侧面板收缩状态:', rightPanelCollapsed.value)
  }
  
  const setLeftPanelCollapsed = (collapsed) => {
    leftPanelCollapsed.value = collapsed
  }
  
  const setRightPanelCollapsed = (collapsed) => {
    rightPanelCollapsed.value = collapsed
  }
  
  const collapseAllPanels = () => {
    leftPanelCollapsed.value = true
    rightPanelCollapsed.value = true
  }
  
  const expandAllPanels = () => {
    leftPanelCollapsed.value = false
    rightPanelCollapsed.value = false
  }
  
  const resetPanels = () => {
    leftPanelCollapsed.value = false
    rightPanelCollapsed.value = false
  }
  
  // 计算属性
  const leftPanelCurrentWidth = computed(() => 
    leftPanelCollapsed.value ? collapsedWidth.value : leftPanelWidth.value
  )
  
  const rightPanelCurrentWidth = computed(() => 
    rightPanelCollapsed.value ? collapsedWidth.value : rightPanelWidth.value
  )
  
  const totalPanelWidth = computed(() => 
    leftPanelCurrentWidth.value + rightPanelCurrentWidth.value
  )
  
  return {
    // 状态
    leftPanelCollapsed,
    rightPanelCollapsed,
    leftPanelWidth,
    rightPanelWidth,
    collapsedWidth,
    
    // 计算属性
    leftPanelCurrentWidth,
    rightPanelCurrentWidth,
    totalPanelWidth,
    
    // Actions
    toggleLeftPanel,
    toggleRightPanel,
    setLeftPanelCollapsed,
    setRightPanelCollapsed,
    collapseAllPanels,
    expandAllPanels,
    resetPanels
  }
})
